<template>
	<el-scrollbar :class="{'mart': knockTableIndex%2 == 0 && knockTableIndex != 0 && LayoutKnockResult[0].length == 8 ,'martSixteen' : knockTableIndex%2 == 0 && knockTableIndex != 0 && LayoutKnockResult[0].length == 16}">
		<layoutTableHeader v-if="knockTableIndex%2==0 && LayoutKnockResult[0] && LayoutKnockResult[0].length != 4 && LayoutKnockResult[0].length != 2 || knockTableIndex == 0" :match_name="MatchInfoLayout.com_name" :match_time="MatchInfoLayout.com_time"
		 :match_location="MatchInfoLayout.address" :referee_name="MatchInfoLayout.referee_name" :project_name="project_name"
		 :logo_url="MatchInfoLayout.logo" />
		<div :class="loadingBox ? 'tableMain-loading':'tableMain'">
			<div class="scoreBox">
				<ul :class="'rank'+ roundsIndex" v-for="(rounds,roundsIndex) in rankArr" :key="roundsIndex">
					<li v-if="pdfLoading_hideRounds(roundsIndex)" class="roundName">{{roundsList[roundsIndex].roundsName}}</li>
					<li v-for='(item,index) in rounds' :key='`${index}b`'>
						<span class='name'>
							<div class="name-box">
								<div :class="item.seed_num||loadingBox ? 'name-box-top-blod':'name-box-top'">
									<div class="name-box-top-site" v-if="item.site">{{item.site}}</div>
									<div class="name-box-top-name">
										<span v-if="item.team_name">{{item.team_name}}</span>
										<span v-else>{{item.user_name}}</span>
										<div v-if="item.seed_num" style="display: flex;">
											(<div style="color: red">{{item.seed_num}}</div>)
										</div>
									</div>
								</div>
								<div style="position: absolute;top: 55px;width: 50%;height: 20px;line-height: 20px;display: flex;" v-if="roundsIndex > 0 && item.score">
									<div style="display: flex;margin-left: 4px;" v-for="(game,gameIndex) in item.score" :key="`${gameIndex}a`">
										<div>{{item|Score(game)}}</div>
										<div v-if="game.tiebreak">({{game.tiebreak}})</div>
									</div>
									<span style="margin-left: 2px;" v-if="item.waiver_user!==0">弃</span>
								</div>
								<div :class="loadingBox ? 'name-box-bot-limit-loading':'name-box-bot-limit'" v-if="item.one_limit && roundsIndex == 0">
									{{item.one_limit|player_limit}}
								</div>
							</div>
						</span>
					</li>
				</ul>
			</div>
		</div>
	</el-scrollbar>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	import layoutTableHeader from './layoutTableHeader'
	import layoutTableFooter from './layoutTableFooter'
	export default {
		data() {
			return {
				rankList: [],
				roundsList: [{}],
				isGroup: 0,
			}
		},
		components: {
			layoutTableHeader,
			layoutTableFooter
		},
		props: {
			LayoutKnockResult: Array,
			loadingBox: Boolean,
			project_name: String,
			seed_site: String,
			drawTime: Number,
			knockTableIndex: Number,
		},
		filters: {
			player_limit(val) {
				return val.substring(0, 8)
			},
			secondSite(val) {
				if (!val) return ''
				if (!isNaN(Number(val))) return val
				return val.substring(1, val.length)
			},
			Score(item, val) {
				//高比分在前
				if (item.user_sign_id == item.sign_id_a) {
					return `${val.top}${val.bot}`
				} else {
					return `${val.bot}${val.top}`
				}
			}
		},
		watch: {
			loadingBox(val) {},
		},
		computed: {
			...mapState({
				VuexKnockResult: 'LayoutKnockResult',
				MatchInfoLayout: 'MatchInfoLayout',
			}),
			drawTimes() {
				let unixtime = this.drawTime
				let unixTimestamp = new Date(unixtime * 1000)
				let Y = unixTimestamp.getFullYear()
				let M = ((unixTimestamp.getMonth() + 1) >= 10 ? (unixTimestamp.getMonth() + 1) : '0' + (unixTimestamp.getMonth() +
					1))
				let D = (unixTimestamp.getDate() >= 10 ? unixTimestamp.getDate() : '0' + unixTimestamp.getDate())
				let h = (unixTimestamp.getHours() >= 10 ? unixTimestamp.getHours() : '0' + unixTimestamp.getHours())
				let m = (unixTimestamp.getMinutes() >= 10 ? unixTimestamp.getMinutes() : '0' + unixTimestamp.getMinutes())
				let s = (unixTimestamp.getSeconds() >= 10 ? unixTimestamp.getSeconds() : '0' + unixTimestamp.getSeconds())
				let toDay = Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
				return toDay
			},
			gridtablepage() {
				let page = parseInt(this.seed_site.split('，').length / 4) + 1
				return page
			},
			gridtable() {
				let seed = this.seed_site == '没有种子' ? false : true
				if (seed) {
					let substrArr = []
					let seed_site = this.seed_site.split('，')
					let surplus = null
					for (let i = 0; i < seed_site.length; i++) {
						let obj = {}
						obj.seed_site = seed_site[i].split("-")[0]
						obj.name = seed_site[i].split("(")[0].split("-")[1]
						obj.sign = seed_site[i].split("(")[1].split(")")[0]
						obj.company = seed_site[i].split("-")[2]
						substrArr.push(obj)
					}
					substrArr.sort(this.compare("seed_site"));
					if (seed_site.length / 4 != 0 && seed_site.length > 4) {
						surplus = 8 - seed_site.length
						for (let i = 0; i < surplus; i++) {
							let obj = {}
							obj.seed_site = ''
							obj.name = ''
							obj.sign = ''
							obj.company = ''
							substrArr.push(obj)
						}
					} else {
						surplus = 4 - seed_site.length
						for (let i = 0; i < surplus; i++) {
							let obj = {}
							obj.seed_site = ''
							obj.name = ''
							obj.sign = ''
							obj.company = ''
							substrArr.push(obj)
						}
					}

					return substrArr
				} else {
					let substrArr = []
					return substrArr
				}
			},
			pdfLoading_hideRounds() {
				return (roundsIndex) => {
					let roundsLength = this.rankArr.length - 1 - 1
					if (this.rankArr.length > 6 && (roundsIndex - roundsLength) > 3) return false //64 128 256
					if (roundsIndex > 0) return true
					return false
				}
			},
			pdfs() {
				let merchant = null
				if (this.rankList[0].length > 32) {
					merchant = this.rankList[0].length / 32
				} else {
					merchant = 1
				}
				return merchant
			},
			rankArr() {
				let arr = []
				let rounds = 0
				let arrLength = 0;
				//let val = JSON.parse(JSON.stringify(this.VuexKnockResult))//要么vuex 要么传参 混搭出问题 报错的坑也在这里 后人留意...
				let val = JSON.parse(JSON.stringify(this.LayoutKnockResult))
				this.rankList = []
				this.roundsList = [{}]
				//第一轮
				for (let j in val[0]) {
					if (typeof val[0][j] == "object") {
						arr.push(val[0][j])
						arrLength = arrLength + 1
					}
				}
				rounds = Math.log(arrLength) / Math.log(2)
				this.rankList.push(arr)
				arrLength = arrLength / 2
				for (let i = 0; i < rounds; i++) {
					let round = []
					if (i == rounds - 1) {
						this.roundsList.push({
							roundsName: '决赛'
						})
					} else {
						if (i == rounds - 2) {
							this.roundsList.push({
								roundsName: '半决赛'
							})
						} else {
							let num = i + 1
							this.roundsList.push({
								roundsName: '第' + num + '轮'
							})
						}
					}
					for (let j = 0; j < arrLength; j++) {
						round.push({
							user_name: '',
							site: ''
						})
					}
					arrLength = arrLength / 2
					this.rankList.push(round)
				}
				//抛开第一轮 进入后几轮
				for (let round in val) {
					if (round > 0) {
						for (let battle in val[round]) {
							this.rankList[round][parseInt(val[round][battle].field) - 1] = val[round][battle]
						}
					}
				}
				//第一轮轮空自动进第二轮
				for (let playerIndex in val[0]) {
					if (val[0][playerIndex].user_name === "轮空位" || val[0][playerIndex].user_name === "轮空") {
						//odd  even
						let nextRoundPlayer = playerIndex % 2 == 0 ? parseInt(playerIndex) + 1 : parseInt(playerIndex) - 1 //判断奇偶
						let nextRoundIndex = Math.ceil((parseInt(playerIndex) + 1) / 2) - 1
						this.rankList[1][nextRoundIndex] = val[0][nextRoundPlayer]
					}
				}
				return this.rankList
			},
		},
		methods: {
			compare(property) { //按对象属性值排序
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value1 - value2;
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	.mart{margin-top: 950px}
	.martSixteen{margin-top: 500px}
	table.gridtable {
		width: 100%;
		font-family: verdana, arial, sans-serif;
		font-size: 11px;
		color: #333333;
		border-width: 1px;
		border-color: #666666;
		border-collapse: collapse;
	}

	table.gridtable th {
		height: 7px;
		line-height: 7px;
		border-width: 1px;
		padding: 8px;
		border-style: solid;
		border-color: #666666;
		background-color: #dedede;
	}

	table.gridtable td {
		line-height: 15px;
		height: 15px;
		border-width: 1px;
		padding: 8px;
		border-style: solid;
		border-color: #666666;
		background-color: #ffffff;
	}

	.layout-table-header {
		height: 140px;
		margin-top: 20px;
		display: flex;
		justify-content: center;
		flex-direction: column;
		font-family: KaiTi, serif;
	}

	.match-name {
		width: 50%;
		height: 50%;
		padding-left: 33.34%;
	}

	.match-name-box {
		width: 70%;
		margin: 0 auto;
		height: 50%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.match-name-logo {
		width: 50px;
		height: 50px;
		float: right;
		margin-right: 10px;
	}

	.match-name-word {
		font-size: 30px;
	}

	.match-project-name {
		width: 70%;
		margin: 0 auto;
		height: 20%;
		font-size: 26px;
		justify-content: center;
	}

	.match-info {
		width: 70%;
		margin: 0 auto;
		justify-content: space-between;
		font-size: 14px;
		align-items: center;
		font-family: Microsoft YaHei, serif;
	}

	.match-info-item {
		flex: 1;
		overflow: hidden;
		background: rgba(66, 185, 131, 0.4)
	}

	.flip-list-move {
		transition: transform 1s;
	}

	.isGroup {
		border-right: 1px solid #eaeaea;
		border-bottom: 0;
		background-color: #fff;
		color: #409EFF !important;
	}

	.isGroup1 {
		border-right: 1px solid #eaeaea;
		border-left: 1px solid #eaeaea;
		border-bottom: 0;
		background-color: #fff;
		color: #409EFF !important;
	}

	.name-box {
		display: flex;
		flex-direction: column;
		height: 55px;
	}

	.name-box-top {
		height: 40%;
		display: flex;
		margin-top: 15%;
		align-items: baseline;
	}

	.name-box-top-blod {
		height: 40%;
		display: flex;
		font-weight: bold;
		margin-top: 15%;
		align-items: baseline;
	}

	.name-box-top-site {
		margin-left: 4px;
		text-align: right
	}

	.name-box-top-name {
		margin-left: 5px;
		display: flex;
		align-items: baseline;
		overflow: hidden;
	}

	.name-box-bot-limit {
		font-size: 8px;
		display: flex;
		height: 50%;
		margin-left: 10%;
		padding-left: 5px;
		overflow: hidden;
	}

	.name-box-bot-limit-loading {
		font-size: 15px;
		display: flex;
		height: 50%;
		margin-left: 10%;
		margin-top: 5px;
		padding-left: 5px;
		overflow: hidden;
	}

	.tableMain {
		margin-top: 20px;
		padding: 0 20px;

		.scoreBox {
			width: 100%;
			display: flex;
			justify-content: center;
			padding-bottom: 30px;

			.roundName {
				font-size: 15px;
			}

			.rank0 {
				padding-left: 150px;

				li {
					width: 120px;
					height: 40px;
					border-bottom: 1px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						height: 40px;
						line-height: 40px;
						width: 150px;
						text-align: center;
						position: absolute;
						bottom: -15px;
						left: -150px;
						top: 30px;

						.name-box {
							display: flex;
							flex-direction: column;
							height: 40px;
						}

						.name-box-top {
							height: 20px;
							display: flex;
							margin-top: 0%;
							align-items: baseline;
						}

						.name-box-top-blod {
							height: 20px;
							display: flex;
							font-weight: bold;
							margin-top: 0%;
							align-items: baseline;
						}

						.name-box-top-site {
							margin-left: 0;
							width: 15%;
							line-height: 20px;
							text-align: right
						}

						.name-box-top-name {
							margin-left: 5px;
							height: 20px;
							line-height: 20px;
							display: flex;
							align-items: baseline;
							width: 85%;
						}

						.name-box-bot-limit {
							font-size: 8px;
							display: flex;
							height: 20px;
							line-height: 20px;
							margin-left: 15%;
							padding-left: 5px;
						}

						.name-box-bot-limit-loading {
							font-size: 15px;
							display: flex;
							height: 20px;
							margin-left: 10%;
							margin-top: 5px;
							padding-left: 5px;
						}
					}
				}

				li:nth-child(even) {
					//奇数
					border-right: 1px solid #727272;
				}

				li:nth-child(odd) {
					//偶数
					width: 121px;
				}
			}

			.rank1 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 81px;
					border-bottom: 1px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}
				}

				li:nth-child(2) {
					height: 61px;
				}

				li:nth-child(odd) {
					border-right: 1px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank2 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 163px;
					border-bottom: 1px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}
				}

				li:nth-child(2) {
					height: 102px;
				}

				li:nth-child(odd) {
					border-right: 1px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank3 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 327px;
					border-bottom: 1px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}
				}

				li:nth-child(2) {
					height: 182px;
				}

				li:nth-child(odd) {
					border-right: 1px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank4 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 652px;
					border-bottom: 1px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}

					.champion {
						display: inline-block;
						width: 80px;
						position: absolute;
						left: 226px;
						top: 348px;
					}
				}

				li:nth-child(2) {
					height: 344px;
				}

				li:nth-child(odd) {
					border-right: 1px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank5 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 1296px;
					border-bottom: 1px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}

					.champion {
						display: inline-block;
						width: 80px;
						position: absolute;
						left: 226px;
						top: 348px;
					}
				}

				li:nth-child(2) {
					height: 682px;
				}

				li:nth-child(odd) {
					border-right: 1px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank6 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 2592px;
					border-bottom: 1px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}

					.champion {
						display: inline-block;
						width: 80px;
						position: absolute;
						left: 226px;
						top: 348px;
					}
				}

				li:nth-child(2) {
					height: 1330px;
				}

				li:nth-child(odd) {
					border-right: 1px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank7 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 5184px;
					border-bottom: 1px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}

					.champion {
						display: inline-block;
						width: 80px;
						position: absolute;
						left: 226px;
						top: 348px;
					}
				}

				li:nth-child(2) {
					height: 2626px;
				}

				li:nth-child(odd) {
					border-right: 1px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank8 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 10496px;
					border-bottom: 1px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}

					.champion {
						display: inline-block;
						width: 80px;
						position: absolute;
						left: 226px;
						top: 348px;
					}
				}

				li:nth-child(2) {
					height: 5260px;
				}

				li:nth-child(odd) {
					border-right: 1px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}
		}
	}

	.tableMain-loading {
		// margin-top: 20px;
		padding: 0 20px;
		padding-bottom: 35px;

		.scoreBox {
			width: 100%;
			display: flex;
			justify-content: center;
			padding-bottom: 30px;
			font-size: 18px;

			.roundName {
				font-size: 20px;
			}

			.rank0 {
				padding-left: 180px;

				li {
					width: 120px;
					height: 55px;
					height: 45px;
					border-bottom: 2px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						height: 40px;
						line-height: 40px;
						width: 180px;
						text-align: center;
						position: absolute;
						bottom: -15px;
						left: -180px;
						top: 45px;

						.name-box {
							display: flex;
							flex-direction: column;
							height: 40px;
						}

						.name-box-top {
							height: 20px;
							display: flex;
							margin-top: 0%;
							align-items: baseline;
						}

						.name-box-top-blod {
							height: 20px;
							display: flex;
							font-weight: bold;
							margin-top: 0%;
							align-items: baseline;
						}

						.name-box-top-site {
							width: 15%;
							line-height: 20px;
							text-align: right
						}

						.name-box-top-name {
							margin-left: 5px;
							height: 20px;
							line-height: 20px;
							width: 85%;
							display: flex;
							align-items: baseline;
						}

						.name-box-bot-limit {
							font-size: 8px;
							display: flex;
							height: 20px;
							line-height: 20px;
							margin-left: 15%;
							padding-left: 5px;
						}

						.name-box-bot-limit-loading {
							font-size: 15px;
							display: flex;
							height: 20px;
							margin-left: 15%;
							margin-top: 3px;
							line-height: 20px;
							padding-left: 5px;
						}
					}
				}

				li:nth-child(even) {
					//奇数
					border-right: 2px solid #727272;
				}

				li:nth-child(odd) {
					//偶数
					width: 121px;
				}
			}

			.rank1 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					// height: 112px;
					height: 92px;
					border-bottom: 2px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 204px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}
				}

				li:nth-child(2) {
					// height: 84px;
					height: 74px;
				}

				li:nth-child(odd) {
					border-right: 2px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank2 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					// height: 226px;
					height: 186px;
					border-bottom: 2px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}
				}

				li:nth-child(2) {
					// height: 140px;
					height: 125px;
				}

				li:nth-child(odd) {
					border-right: 2px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank3 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					// height: 454px;
					height: 376px;
					border-bottom: 2px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}
				}

				li:nth-child(2) {
					// height: 251px;
					height: 222px;
				}

				li:nth-child(odd) {
					border-right: 2px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank4 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					// height: 908px;
					height: 746px;
					border-bottom: 2px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}

					.champion {
						display: inline-block;
						width: 80px;
						position: absolute;
						left: 226px;
						top: 348px;
					}
				}

				li:nth-child(2) {
					// height: 478px;
					height: 422px;
				}

				li:nth-child(odd) {
					border-right: 2px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank5 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 1827px;
					border-bottom: 2px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}

					.champion {
						display: inline-block;
						width: 80px;
						position: absolute;
						left: 226px;
						top: 348px;
					}
				}

				li:nth-child(2) {
					// height: 924px;
					height: 800px;
				}

				li:nth-child(odd) {
					border-right: 2px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank6 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 3646px;
					border-bottom: 2px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}

					.champion {
						display: inline-block;
						width: 80px;
						position: absolute;
						left: 226px;
						top: 348px;
					}
				}

				li:nth-child(2) {
					height: 1844px;
				}

				li:nth-child(odd) {
					border-right: 2px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank7 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 7287px;
					border-bottom: 2px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}

					.champion {
						display: inline-block;
						width: 80px;
						position: absolute;
						left: 226px;
						top: 348px;
					}
				}

				li:nth-child(2) {
					height: 3676px;
				}

				li:nth-child(odd) {
					border-right: 2px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}

			.rank8 {
				border-left: 1px solid #eaeaea;
				position: relative;

				li {
					width: 120px;
					height: 14336px;
					border-bottom: 2px solid #727272;
					position: relative;

					.name {
						display: inline-block;
						width: 220px;
						text-align: center;
						position: absolute;
						bottom: 0px;
						left: 0px;
					}

					.champion {
						display: inline-block;
						width: 80px;
						position: absolute;
						left: 226px;
						top: 348px;
					}
				}

				li:nth-child(2) {
					height: 7327px;
				}

				li:nth-child(odd) {
					border-right: 2px solid #727272;
				}

				li:nth-child(even) {
					width: 121px;
				}

				li:first-child {
					position: absolute;
					border: 0;
					text-align: center;
				}
			}
		}
	}
</style>
